﻿@{
    ViewData["Title"] = "Index";
}

<div class="content animate-panel">
    <div class="row">
        <div class="col-md-3">
            <div class="hpanel">
                <div class="panel-body">
                    <div class="text-center">
                        <h2 class="m-b-xs">Box title</h2>
                        <p class="font-bold text-success">Lorem ipsum</p>
                        <div class="m">
                            <i class="pe-7s-science fa-5x"></i>
                        </div>
                        <p class="small">
                            Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                        </p>
                        <button class="btn btn-success btn-sm">Action button</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="hpanel">
                <div class="panel-body">
                    <div class="text-center">
                        <h2 class="m-b-xs">Box title</h2>
                        <p class="font-bold text-info">Lorem ipsum</p>
                        <div class="m">
                            <i class="pe-7s-global fa-5x"></i>
                        </div>
                        <p class="small">
                            Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                        </p>
                        <button class="btn btn-info btn-sm">Action button</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="hpanel">
                <div class="panel-body">
                    <div class="text-center">
                        <h2 class="m-b-xs">Box title</h2>
                        <p class="font-bold text-warning">Lorem ipsum</p>
                        <div class="m">
                            <i class="pe-7s-display1 fa-5x"></i>
                        </div>
                        <p class="small">
                            Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                        </p>
                        <button class="btn btn-warning btn-sm">Action button</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="hpanel">
                <div class="panel-body">
                    <div class="text-center">
                        <h2 class="m-b-xs">Box title</h2>
                        <p class="font-bold text-danger">Lorem ipsum</p>
                        <div class="m">
                            <i class="pe-7s-airplay fa-5x"></i>
                        </div>
                        <p class="small">
                            Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                        </p>
                        <button class="btn btn-danger btn-sm">Action button</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-3">
            <div class="hpanel">
                <div class="panel-body">
                    <div class="stats-title pull-left">
                        <h4>Page Views</h4>
                    </div>
                    <div class="stats-icon pull-right">
                        <i class="pe-7s-monitor fa-4x"></i>
                    </div>
                    <div class="m-t-xl">
                        <h1 class="text-success">160k+</h1>
                        <small>
                            Lorem Ipsum is simply dummy text of the printing and <strong>typesetting industry</strong>. Lorem Ipsum has been.
                        </small>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="hpanel">
                <div class="panel-body">
                    <div class="stats-title pull-left">
                        <h4>Acite Views</h4>
                    </div>
                    <div class="stats-icon pull-right">
                        <i class="pe-7s-shuffle fa-4x"></i>
                    </div>
                    <div class="m-t-xl">
                        <h1 class="text-info">462</h1>
                        <small>
                            Lorem Ipsum is simply dummy text of the printing and <strong>typesetting industry</strong>. Lorem Ipsum has been.
                        </small>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="hpanel">
                <div class="panel-body">
                    <div class="stats-title pull-left">
                        <h4>Income</h4>
                    </div>
                    <div class="stats-icon pull-right">
                        <i class="pe-7s-ticket fa-4x"></i>
                    </div>
                    <div class="m-t-xl">
                        <h1 class="text-warning">$200,00</h1>
                        <small>
                            Lorem Ipsum is simply dummy text of the printing and <strong>typesetting industry</strong>. Lorem Ipsum has been.
                        </small>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="hpanel">
                <div class="panel-body">
                    <div class="stats-title pull-left">
                        <h4>Messages</h4>
                    </div>
                    <div class="stats-icon pull-right">
                        <i class="pe-7s-attention fa-4x"></i>
                    </div>
                    <div class="m-t-xl">
                        <h1 class="text-danger">680</h1>
                        <small>
                            Lorem Ipsum is simply dummy text of the printing and <strong>typesetting industry</strong>. Lorem Ipsum has been.
                        </small>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-3">
            <div class="hpanel">
                <div class="panel-body">
                    <div class="stats-title pull-left">
                        <h4>Chart box</h4>
                    </div>
                    <div class="flot-chart" style="height: 150px">
                        <div class="flot-chart-content" id="flot-line-chart" style="height: 150px"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-3">
            <div class="hpanel">
                <div class="panel-body">
                    <div class="stats-title pull-left">
                        <h4>Chart box</h4>
                    </div>
                    <div class="flot-chart" style="height: 150px">
                        <div class="flot-chart-content" id="flot-bar-chart" style="height: 150px"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-3">
            <div class="hpanel">
                <div class="panel-body">
                    <div class="stats-title pull-left">
                        <h4>Chart box</h4>
                    </div>
                    <div class="flot-chart m-t-lg" style="height: 120px">
                        <div class="flot-chart-content" id="flot-pie-chart" style="height: 120px"></div>
                    </div>

                </div>
            </div>
        </div>

        <div class="col-md-3">
            <div class="hpanel">
                <div class="panel-body">
                    <div class="stats-title">
                        <h4>Progress box</h4>
                    </div>
                    <div class="m-t-lg">
                        <div class="progress m-t-xs full progress-small">
                            <div style="width: 25%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25" role="progressbar" class=" progress-bar progress-bar-danger">
                                <span class="sr-only">35% Complete (success)</span>
                            </div>
                        </div>
                        <div class="progress m-t-xs full progress-small">
                            <div style="width: 35%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="35" role="progressbar" class=" progress-bar progress-bar-danger">
                                <span class="sr-only">35% Complete (success)</span>
                            </div>
                        </div>
                        <div class="progress m-t-xs full progress-small">
                            <div style="width: 55%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="55" role="progressbar" class=" progress-bar progress-bar-danger">
                                <span class="sr-only">35% Complete (success)</span>
                            </div>
                        </div>
                        <div class="progress m-t-xs full progress-small">
                            <div style="width: 75%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="75" role="progressbar" class=" progress-bar progress-bar-danger">
                                <span class="sr-only">35% Complete (success)</span>
                            </div>
                        </div>
                        <div class="progress m-t-xs full progress-small">
                            <div style="width: 95%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="95" role="progressbar" class=" progress-bar progress-bar-danger">
                                <span class="sr-only">35% Complete (success)</span>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>

    </div>


    <div class="row">
        <div class="col-md-3">
            <div class="hpanel hbggreen">
                <div class="panel-body">
                    <div class="text-center">
                        <h3>Title text</h3>
                        <p class="text-big font-light">
                            20
                        </p>
                        <small>
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                        </small>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="hpanel hbgblue">
                <div class="panel-body">
                    <div class="text-center">
                        <h3>Title text</h3>
                        <p class="text-big font-light">
                            160
                        </p>
                        <small>
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                        </small>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="hpanel hbgyellow">
                <div class="panel-body">
                    <div class="text-center">
                        <h3>Title text</h3>
                        <p class="text-big font-light">
                            750
                        </p>
                        <small>
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                        </small>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="hpanel hbgred">
                <div class="panel-body">
                    <div class="text-center">
                        <h3>Title text</h3>
                        <p class="text-big font-light">
                            0,43
                        </p>
                        <small>
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                        </small>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-3">
            <div class="hpanel">
                <div class="panel-body">
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>Task</th>
                                    <th>Date</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>
                                        <span class="text-success font-bold">Lorem ipsum</span>
                                    </td>
                                    <td>Jul 14, 2013</td>
                                </tr>
                                <tr>
                                    <td>
                                        <span class="text-success font-bold">Lorem ipsum</span>
                                    </td>
                                    <td>Jul 09, 2015</td>
                                </tr>
                                <tr>
                                    <td>
                                        <span class="text-success font-bold">Lorem ipsum</span>
                                    </td>
                                    <td>Jul 24, 2014</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

            </div>
        </div>
        <div class="col-md-3">
            <div class="hpanel">
                <div class="panel-body">
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>Task</th>
                                    <th>Date</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>
                                        <span class="text-info font-bold">Lorem ipsum</span>
                                    </td>
                                    <td>Jul 14, 2013</td>
                                </tr>
                                <tr>
                                    <td>
                                        <span class="text-info font-bold">Lorem ipsum</span>
                                    </td>
                                    <td>Jul 09, 2015</td>
                                </tr>
                                <tr>
                                    <td>
                                        <span class="text-info font-bold">Lorem ipsum</span>
                                    </td>
                                    <td>Jul 24, 2014</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

            </div>
        </div>
        <div class="col-md-3">
            <div class="hpanel">
                <div class="panel-body">
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>Task</th>
                                    <th>Date</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>
                                        <span class="text-warning font-bold">Lorem ipsum</span>
                                    </td>
                                    <td>Jul 14, 2013</td>
                                </tr>
                                <tr>
                                    <td>
                                        <span class="text-warning font-bold">Lorem ipsum</span>
                                    </td>
                                    <td>Jul 09, 2015</td>
                                </tr>
                                <tr>
                                    <td>
                                        <span class="text-warning font-bold">Lorem ipsum</span>
                                    </td>
                                    <td>Jul 24, 2014</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

            </div>
        </div>
        <div class="col-md-3">
            <div class="hpanel">
                <div class="panel-body">
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>Task</th>
                                    <th>Date</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>
                                        <span class="text-danger font-bold">Lorem ipsum</span>
                                    </td>
                                    <td>Jul 14, 2013</td>
                                </tr>
                                <tr>
                                    <td>
                                        <span class="text-danger font-bold">Lorem ipsum</span>
                                    </td>
                                    <td>Jul 09, 2015</td>
                                </tr>
                                <tr>
                                    <td>
                                        <span class="text-danger font-bold">Lorem ipsum</span>
                                    </td>
                                    <td>Jul 24, 2014</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

@section Scripts {
<environment names="Development,Staging,Production">
    <script src="~/lib/jquery-flot/jquery.flot.js"></script>
    <script src="~/lib/jquery-flot/jquery.flot.resize.js"></script>
    <script src="~/lib/jquery-flot/jquery.flot.pie.js"></script>
    <script src="~/lib/flot.curvedlines/curvedLines.js"></script>
    <script src="~/lib/flot-spline/js/jquery.flot.spline.min.js"></script>
</environment>

    <script type="text/javascript">

        $(function () {

            $(function () {

                /**
                 * Pie Chart Data
                 */
                var pieChartData = [
                    { label: "Data 1", data: 16, color: "#fad57c", },
                    { label: "Data 2", data: 6, color: "#fde5ad", },
                    { label: "Data 3", data: 22, color: "#fcc43c", },
                    { label: "Data 4", data: 32, color: "#ffb606", }
                ];

                /**
                 * Pie Chart Options
                 */
                var pieChartOptions = {
                    series: {
                        pie: {
                            show: true
                        }
                    },
                    grid: {
                        hoverable: true
                    },
                    tooltip: true,
                    tooltipOpts: {
                        content: "%p.0%, %s", // show percentages, rounding to 2 decimal places
                        shifts: {
                            x: 20,
                            y: 0
                        },
                        defaultTheme: false
                    }
                };

                $.plot($("#flot-pie-chart"), pieChartData, pieChartOptions);

                /**
                 * Bar Chart data
                 */
                var flotChartData = [
                    {
                        label: "bar",
                        data: [[1, 12], [2, 14], [3, 18], [4, 24], [5, 32], [6, 22]]
                    }
                ];
                /**
                 * Bar Chart Options for Analytics
                 */
                var flotBarOptions = {
                    series: {
                        bars: {
                            show: true,
                            barWidth: 0.8,
                            fill: true,
                            fillColor: {
                                colors: [{ opacity: 1 }, { opacity: 1 }]
                            },
                            lineWidth: 1
                        }
                    },
                    xaxis: {
                        tickDecimals: 0
                    },
                    colors: ["#3498db"],
                    grid: {
                        show: false
                    },
                    legend: {
                        show: false
                    }
                };

                $.plot($("#flot-bar-chart"), flotChartData, flotBarOptions);

                /**
                 * Line Chart Data and Options
                 */

                var lineChartData = [
                    {
                        label: "line",
                        data: [[1, 10], [2, 26], [3, 16], [4, 36], [5, 32], [6, 51]]
                    }
                ];

                var lineChartOptions = {
                    series: {
                        lines: {
                            show: true,
                            lineWidth: 0,
                            fill: true,
                            fillColor: "#64cc34"

                        }
                    },
                    colors: ["#62cb31"],
                    grid: {
                        show: false
                    },
                    legend: {
                        show: false
                    }
                };

                $.plot($("#flot-line-chart"), lineChartData, lineChartOptions);

            })

        });
    </script>
}